<template>
  <div id="order">
    订单管理组件<br>

    <form name="form1">
      <div class="w">
        <div class="logo">
          <img width="170" height="60" src="//misc.360buyimg.com/lib/img/e/logo-2013-b.png" alt="京东商城">
        </div>
        <div class="m m1">
          <table class="tb1">
            <tbody>
              <tr>
                <td class="t1">订单编号：{{ order.id }}</td>
                <td class="t2">订购时间：{{ order.create }}</td>
              </tr>
            </tbody>
          </table>
          <table class="tb2">
            <colgroup>
              <col class="t1">
              <col class="t2">
            </colgroup>
            <tbody>
              <tr>
                <td>客户姓名：</td>
                <td>{{ order.customerName }}</td>
              </tr>
              <tr>
                <td>联系方式：</td>
                <td>{{ order.customerPhone }}</td>
              </tr>
              <tr>
                <td>客户地址：</td>
                <td>{{ order.customerAddress }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="m m2">
          <table class="tb4">
            <colgroup>
              <col class="gap">
              <col class="t3">
              <col class="t4" style="width:50%;">
              <col class="t5">
              <col class="t7">
              <col class="gap">
            </colgroup>
            <tbody>
              <tr>
                <th class="gap" />
                <th class="al">商品编号</th>
                <th>商品名称</th>
                <th>数量</th>
                <th class="ar">商品金额</th>
                <th class="gap" />
              </tr>
              <tr>
                <td class="gap" />
                <td class="al">{{ order.id }}</td>
                <td>
                  <div class="p-name">{{ order.productName }}</div>
                </td>
                <td><span class="num">1</span></td>
                <td class="ar"><span class="num">¥{{ order.orderPrice }}</span></td>
                <td class="gap" />
              </tr>
            </tbody>
          </table>
          <div class="goods-total">

            <ul>
              <li>
                <span class="label">商品总额：</span>
                <span class="txt">¥{{ order.orderPrice }}</span>
              </li>
              <li>
                <span class="label">运　　费：</span>
                <span class="txt">
                  ¥0.00
                </span>
              </li>

              <li>
                <span class="label">支付有礼：</span>
                <span class="txt">-¥0.00</span>
              </li>

              <li class="ftx-01">
                <span class="label">应付总额：</span>
                <span class="txt count">¥{{ order.orderPrice }}</span>
              </li>

            </ul>

          </div>
        </div>
      </div>
      <div class="v-h">
        <div class="w"><input name="" class="print-btn" type="button" value="打印" onclick="javascript:window.print();">
        </div>
      </div>
      <div class="footer">
        <p class="p1">品质生活，尽在京东商城</p>
      </div>
    </form>
  </div>
</template>

<script>
import { queryOrderDetails } from '@/api/order'
export default {
  name: 'Index',
  props: ['orderId', 'order'],
  data() {
    return {
      // order:{
      //
      // }
    }
  },
  mounted() {
    // this.queryOrderDetails()
  },
  methods: {
    /*
      queryOrderDetails(){
        alert(this.orderId);
        queryOrderDetails({orderId:this.orderId}).then(response=>{
          this.order = response.message;
          console.log(this.order)
        })
      }
      */
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0
  }

  body {
    font: 12px/1.5 "\5b8b\4f53";
    color: #333
  }

  .w {
    width: 990px;
    margin: 0 auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .m {
    margin-bottom: 20px;
  }

  .al {
    text-align: left;
  }

  .ar {
    text-align: right;
  }

  .clr {
    clear: both;
  }

  em {
    font-style: normal;
  }

  .m1 {
    padding: 0 20px 20px;
    border-style: solid;
    border-width: 2px 1px 1px;
    border-color: #aaa #eee #eee;
  }

  .m1 .tb1 td {
    height: 1.1cm;
    line-height: 1.1cm;
    border-bottom: 1px solid #f5f5f5;
  }

  .tb1 .t1 {
    width: 50%;
  }

  .tb1 .t2 {
    width: 50%;
    text-align: right;
  }

  .tb2 td {
    height: 0.8cm;
    line-height: 0.8cm;
  }

  .tb2 .t1 {
    width: 2cm;
  }

  .m2 {
    border: 1px solid #eee;
  }

  .tb4 th {
    background: #f9f9f9;
    height: 1.1cm;
    line-height: 1.1cm;
    font-weight: normal;
  }

  .tb4 td {
    height: 1.8cm;
    line-height: 1.8cm;
    border-bottom: 1px solid #f5f5f5;
    text-align: center
  }

  .tb4 td.al {
    text-align: left
  }

  .tb4 td.ar {
    text-align: right
  }

  .tb4 .gap {
    width: 20px;
  }

  .tb4 td.gap {
    border-color: #fff;
  }

  .tb4 .t3, .tb4 .t5, .tb .t7 {
    width: 18%;
  }

  .tb4 .p-name {
    text-align: left
  }

  .tb4 .num {
    font-family: verdana
  }

  /*.tb4{border-collapse:collapse;border:1px solid #000}*/
  /*.tb4 th, .tb4 td,.d1{border:1px solid #000}*/
  .d1 {
    padding: 10px
  }

  .d2 {
    text-align: right;
    padding: 10px 0;
    font-size: 14px
  }

  .logo {
    padding: 10px
  }

  .footer { /*position:absolute;bottom:0;left:0;*/
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #ededed;
    text-align: center;
  }

  .v-h {
    margin: 10px 0;
    border-top: 2px solid #ededed;
    text-align: right
  }

  .print-btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 96px;
    height: 50px;
    line-height: 50px;
    background: #e54346;
    color: #fff;
    font-family: 'Microsoft YaHei';
    font-size: 18px;
    font-weight: bold;
    border: 0;
  }

  .m2 {
    padding-left: 1px
  }

  .goods-total {
    display: inline-block;
    display: block;
    padding: 20px
  }

  .goods-total:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  * html
  .goods-total {
    height: 1%
  }

  * + html
  .goods-total {
    min-height: 1%
  }

  .goods-total ul {
    float: right
  }

  .goods-total li {
    display: inline-block;
    display: block;
    line-height: 28px
  }

  .goods-total li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  * html
  .goods-total li {
    height: 1%
  }

  * + html
  .goods-total li {
    min-height: 1%
  }

  .goods-total .label {
    float: left;
    width: 500px;
    text-align: right
  }

  .goods-total .w-label {
    width: 420px;
    float: left;
    text-align: right;
    color: #999
  }

  .goods-total .wy-label {
    width: 80px
  }

  .goods-total .txt {
    float: left;
    width: 130px;
    text-align: right;
    font-family: verdana
  }

  .goods-total .txt .help-tips {
    padding-right: 3px
  }

  .goods-total .count {
    font-size: 18px;
    font-weight: 700
  }

  .root61 .goods-list .col-goods {
    width: 500px
  }

  .root61 .goods-list td {
    padding: 17px 0 20px
  }

  .root61 .goods-list td.grap {
    padding: 0
  }

  .root61 .goods-list .p-info {
    width: 355px
  }
</style>
<style type="text/css" media="print">
  .v-h {
    display: none;
  }
</style>
